<style scoped lang="scss">
.tree-container {
	position: relative;
	// overflow: hidden;
	transition: width 0.3s ease;

	.scale-btn {
		z-index: 99;
		position: absolute;
		right: -20px;
		top: 50%;
		transform: translate(-50%, -50%);
		cursor: pointer;

		&.scale-open {
			right: -20px;
		}
	}

	.menu-box {
		width: 290px;
	}

	.row {
		overflow: hidden;
		padding: 7px 8px;

		.col {
			width: 64px;
			height: 40px;
			background: #e0e9fd;
			color: #091940;
			border-radius: 5px;
			text-align: center;
			float: left;
			margin-right: 6px;
			font-size: 14px;
			line-height: 14px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			cursor: pointer;

			&:nth-child(4n) {
				margin-right: 0px;
			}

			&:nth-child(n+5) {
				margin-top: 7px;
			}

			&.selected {
				background: #668FF5;
				color: #FEFEFE;
			}

			div:first-child {
				margin-bottom: 4px;
			}
		}
	}

	.el-tree {
		width: 290px;
	}

	.search-box {
		height: 38px;
		border: 1px solid #efefef;
		display: flex;
		align-items: center;
		padding-left: 8px;

		.search-input {
			width: 212px;
			height: 28px;
		}

		img {
			margin-left: 12px;
			cursor: pointer;
		}
	}

	.scroll-class {
		overflow: auto;
	}

}

// :deep(.el-scrollbar__view) {
//     // height: 100%;
//     // overflow: auto;

// }
.scrollbar-demo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	margin: 10px;
	text-align: center;
	border-radius: 4px;
	background: var(--el-color-primary-light-9);
	color: var(--el-color-primary);
}

.el-slider {
	margin-top: 20px;
}
</style>
<template>
	<div class="tree-container" :style="{ width: treeWidth + 'px' }">
		<img class="scale-btn" :class="{ 'scale-open': !treeWidth }" :src="treeWidth ? scaleBtn : scale2Btn"
			@click="toggleTreeWidth" />
		<div class="row menu-box" v-show="treeWidth">
			<div v-if="ConfigSetting.listCate.includes('全部车辆')" class="col " :class="{ selected: queryParams.status == 1 }"
				@click="switchStatus('全部车辆')">
				<div>全部</div>
				<div>{{ totalInfo.all }}</div>
			</div>
			<div v-if="ConfigSetting.listCate.includes('在线车辆')" class="col" :class="{ selected: queryParams.status == 2 }"
				@click="switchStatus('在线车辆')">
				<div>在线</div>
				<div>{{ totalInfo.online }}</div>
			</div>
			<div v-if="ConfigSetting.listCate.includes('离线车辆')" class="col" :class="{ selected: queryParams.status == 3 }"
				@click="switchStatus('离线车辆')">
				<div>离线</div>
				<div>{{ totalInfo.offline }}</div>
			</div>
			<div v-if="ConfigSetting.listCate.includes('关注车辆')" class="col" :class="{ selected: queryParams.status == 4 }"
				@click="switchStatus('关注车辆')">
				<div>关注</div>
				<div>{{ totalInfo.collect }}</div>
			</div>
			<div v-if="ConfigSetting.listCate.includes('停运车辆')" class="col" :class="{ selected: queryParams.status == 5 }"
				@click="switchStatus('停运车辆')">
				<div>停运</div>
				<div>{{ totalInfo.outage }}</div>
			</div>
			<div v-if="ConfigSetting.listCate.includes('行驶车辆')" class="col" :class="{ selected: queryParams.status == 6 }"
				@click="switchStatus('行驶车辆')">
				<div>行驶</div>
				<div>{{ totalInfo.run }}</div>
			</div>
			<div v-if="ConfigSetting.listCate.includes('熄火车辆')" class="col" :class="{ selected: queryParams.status == 7 }"
				@click="switchStatus('熄火车辆')">
				<div>熄火</div>
				<div>{{ totalInfo.stall }}</div>
			</div>
			<!-- <div v-if="ConfigSetting.listCate.includes('警报车辆')" class="col" @click="switchStatus('警报车辆')">
                <div>警报</div>
                <div>{{ totalInfo.alarm }}</div>
            </div> -->
		</div>
		<div class="search-box" v-show="treeWidth">
			<el-input class="search-input" v-model="queryParams.queryParam" placeholder="请输入车牌号/设备号/自编号" />
			<img :src="searchBtn" @click="searchOp" />
			<el-popover placement="right" :width="350" :visible="visible">
				<template #reference>
					<img :src="settingBtn" @click="visible = true" />
				</template>
				<el-form ref="formRef" label-position="top" label-width="100px" :model="form" style="max-width: 460px">
					<el-form-item label="页面全局设置">
						<el-checkbox-group v-model="form.global" @change="handleCheckedCitiesChange">
							<el-checkbox label="只监联网联控车辆" name="gloab" value="122" />
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="车辆选择列表">
						<el-checkbox-group v-model="form.groupShow">
							<el-checkbox label="车队显示" name="car" />
							<el-checkbox label="线路显示" name="line" />
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="列表分类">
						<!-- 1全部车辆 2在线车辆 3离线车辆 4关注车辆 5停运车辆 6行驶车辆 7停火车辆 -->
						<el-checkbox-group v-model="form.listCate">
							<el-checkbox label="全部车辆" name="1" disabled />
							<el-checkbox label="在线车辆" name="2" />
							<el-checkbox label="离线车辆" name="3" />
							<el-checkbox label="关注车辆" name="4" />
							<el-checkbox label="停运车辆" name="5" />
							<el-checkbox label="行驶车辆" name="6" />
							<el-checkbox label="熄火车辆" name="7" />
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="车辆显示">
						<el-checkbox-group v-model="form.carShow">
							<el-checkbox label="车牌" name="1" />
							<el-checkbox label="自编号" name="2" />
							<el-checkbox label="车辆类型" name="3" />
							<el-checkbox label="驾驶员姓名" name="4" />
							<el-checkbox label="速度" name="5" />
							<el-checkbox label="所在区域" name="6" />
							<el-checkbox label="设备编号" name="7" />
						</el-checkbox-group>
					</el-form-item>
					<el-form-item>
						<el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">
							保存
						</el-button>
						<el-button size="small" @click="visible = false">关闭</el-button>
					</el-form-item>
				</el-form>
			</el-popover>
		</div>
		<!-- <div class="scroll-class"> -->
		<div id="ztree-box" class="scroll-class" :style="{ height: treeHeight + 'px' }">
			<div class="ztree vue-giant-tree" :id="ztreeData.ztreeId"></div>
		</div>

		<v-contextmenu ref="contextmenu" theme="bright">
			<v-contextmenu-item
				v-if="ztreeData.rightClickType == 'vehicle' || ztreeData.rightClickType == 'dept' || ztreeData.rightClickType == 'fleet' || ztreeData.rightClickType == 'route'"
				@click="collectVehicle">收藏</v-contextmenu-item>
			<v-contextmenu-item @click="deleteCollectVehicle"
				v-if="ztreeData.rightClickType == 'vehicle' || ztreeData.rightClickType == 'dept' || ztreeData.rightClickType == 'fleet' || ztreeData.rightClickType == 'route'">取消收藏</v-contextmenu-item>
			<v-contextmenu-item @click="collectVehicle"
				v-if="ztreeData.rightClickType == 'vehicle' || ztreeData.rightClickType == 'dept' || ztreeData.rightClickType == 'fleet' || ztreeData.rightClickType == 'route'">车辆点名</v-contextmenu-item>
			<v-contextmenu-item @click="carDown" v-if="ztreeData.rightClickType == 'vehicle'">车辆点名</v-contextmenu-item>
			<v-contextmenu-item @click="historyTrack" v-if="ztreeData.rightClickType == 'vehicle'">轨迹跟踪</v-contextmenu-item>
			<v-contextmenu-item @click="liveVideo" v-if="ztreeData.rightClickType == 'vehicle'">实时视频</v-contextmenu-item>
			<v-contextmenu-item @click="videoHistory" v-if="ztreeData.rightClickType == 'vehicle'">视频回放</v-contextmenu-item>
			<v-contextmenu-item @click="sms"
				v-if="ztreeData.rightClickType == 'vehicle' || ztreeData.rightClickType == 'dept' || ztreeData.rightClickType == 'fleet' || ztreeData.rightClickType == 'route'">短信下发</v-contextmenu-item>
			<v-contextmenu-item @click="voice"
				v-if="ztreeData.rightClickType == 'vehicle' || ztreeData.rightClickType == 'dept' || ztreeData.rightClickType == 'fleet' || ztreeData.rightClickType == 'route'">语音对讲</v-contextmenu-item>
			<v-contextmenu-item @click="takePhoto"
				v-if="ztreeData.rightClickType == 'vehicle' || ztreeData.rightClickType == 'dept' || ztreeData.rightClickType == 'fleet' || ztreeData.rightClickType == 'route'">拍摄照片</v-contextmenu-item>
			<v-contextmenu-item @click="terminalRead" v-if="ztreeData.rightClickType == 'vehicle'">终端信息读取</v-contextmenu-item>
			<v-contextmenu-item @click="terminalSetting"
				v-if="ztreeData.rightClickType == 'vehicle' || ztreeData.rightClickType == 'dept' || ztreeData.rightClickType == 'fleet' || ztreeData.rightClickType == 'route'">终端参数设置</v-contextmenu-item>
		</v-contextmenu>
	</div>
</template>
<script setup name="carsTree">
const emits = defineEmits(['onAsyncError', 'onAsyncSuccess', 'onClick', 'onCheck']);
import "@ztree/ztree_v3/js/jquery.ztree.all";
//ztree end
import searchBtn from '@/assets/images/safe/search.png'
import settingBtn from '@/assets/images/setting.png'
import scaleBtn from '@/assets/images/safe/scale.png'
import scale2Btn from '@/assets/images/safe/scale_2.png'
const { proxy } = getCurrentInstance();
import { useWindowSize } from '@vueuse/core'
import useVehicleStore from '@/store/modules/vehicle'
import useSatetyMapStore from '@/store/modules/safetyMap'
import { vehicleTree, vehicleTreeList, vehicleDetail } from '@/api/safety/vehicle.js'
import { addCollectVehicle, delCollectVehicle } from '@/api/safety/collectVehicle.js'
import { detaildPageSetting, addPageSetting, updatePageSetting } from '@/api/basic/userPageSetting.js'
const {
	basic_vehicle_type
} = proxy.useDict(
	'basic_vehicle_type'
);
const buttonLoading = ref(false)
const { width, height } = useWindowSize();
const treeHeight = ref(0);
const treeWidth = ref(290);
const ztreeData = reactive({
	ztreeId: "ztree_" + parseInt(Math.random() * 1e10),
	rightClickType: '',
	ztreeObj: null,
	selectedCarIds: [],
	list: [
		{ id: 1, pid: 0, name: "全局", open: true },
		{ id: 11, pid: 1, name: "随意勾选 1-1", open: true },
		{ id: 111, pid: 11, name: "随意勾选 1-1-1" },
		{ id: 112, pid: 11, name: "随意勾选 1-1-2" },
		{ id: 12, pid: 1, name: "随意勾选 1-2", open: true },
		{ id: 121, pid: 12, name: "随意勾选 1-2-1" },
		{ id: 122, pid: 12, name: "随意勾选 1-2-2" },
		{ id: 2, pid: 0, name: "随意勾选 2", checked: true, open: true },
		{ id: 21, pid: 2, name: "随意勾选 2-1" },
		{ id: 22, pid: 2, name: "渝A35799(0785266)[危险品运输车]  王有明   32km/s  涪陵区  （ID556987741）", type: 'vehicle', open: true, diy: 'zc', iconSkin: "icon04" }, // icon: offlineImg 
		{ id: 221, pid: 22, name: "随意勾选 2-2-1", checked: true },
		{ id: 222, pid: 22, name: "随意勾选 2-2-2", nocheck: true },
		{ id: 23, pid: 2, name: "随意勾选 2-3" },
	],
	ztreeSetting: {
		view: {
			showIcon: false, // default to hide icon
		},
		callback: {
			onCheck: (...arg) => {
				checkChange(...arg)
				// emits("onCheck", ...arg);
			},
			onClick: (...arg) => {
				nodeClick(...arg)
				// emits("onClick", ...arg);
			},
			onCollapse: (...arg) => {
				emits("onCollapse", ...arg);
			},
			onDblClick: (...arg) => {
				emits("onDblClick", ...arg);
			},
			onDrag: (...arg) => {
				emits("onDrag", ...arg);
			},
			onDragMove: (...arg) => {
				emits("onDragMove", ...arg);
			},
			onDrop: (...arg) => {
				emits("onDrop", ...arg);
			},
			onExpand: (...arg) => {
				emits("onExpand", ...arg);
			},
			onMouseDown: (...arg) => {
				emits("onMouseDown", ...arg);
			},
			onMouseUp: (...arg) => {
				emits("onMouseUp", ...arg);
			},
			onRightClick: (...arg) => {
				nodeContextmenu(...arg)
				// emits("onRightClick", ...arg);
			},
			beforeMouseDown: (...arg) => {
				contextmenu.value.hide()
			}
		},
	},
})
treeHeight.value = height.value - 200 - 71;
function toggleTreeWidth() {
	treeWidth.value = treeWidth.value == 0 ? 290 : 0;
}
const data = reactive({
	form: {
		global: ["只监联网联控车辆"],
		groupShow: [],
		listCate: ['全部车辆', '在线车辆', '离线车辆', '关注车辆'],
		carShow: ['车牌'],

	},
	queryParams: {
		netState: 0, //0禁用 1启用
		route: 0, //是否显示线路
		fleet: 0, //是否显示车队
		status: 1, //车辆分类 1全部车辆 2在线车辆 3离线车辆 4关注车辆 5停运车辆 6行驶车辆 7停火车辆
		queryParam: ''
	}
});

const { queryParams, form } = toRefs(data);
const configForm = ref();
function handleCheckedCitiesChange(e) {
	console.log('change', e)
}

const visible = ref(false)
const ConfigSetting = ref(form.value);
var configKey = 'treeConfigPage';
async function getConfig() {
	let config = await detaildPageSetting(configKey)
	if (config.data != null) {
		configForm.value = config.data
		ConfigSetting.value = JSON.parse(config.data.content)
		form.value = JSON.parse(config.data.content)
	}
	else {
		ConfigSetting.value = data.form
	}
	searchCar()

}
getConfig();
function searchOp() {
	searchCar()
}
var allVehicleDatas = {};
var allVehicleIds = [];
/**
 * 查找车辆树
 */
function searchCar(init = true) {
	queryParams.value.fleet = ConfigSetting.value.groupShow.includes('车队显示') ? 1 : 0;
	queryParams.value.route = ConfigSetting.value.groupShow.includes('线路显示') ? 1 : 0;
	vehicleTree(queryParams.value).then(res => {
		allVehicleDatas = {};
		allVehicleIds = [];
		_rebuildDatas(res.data)
		ztreeData.list = res.data
		safeMapStore.setDefaultAllVehicleIds(allVehicleIds)
		if (init) {
			initShow()
		} else {
			updateTree()
		}
	})
}

function initShow() {
	nextTick(() => {
		ztreeData.ztreeObj = $.fn.zTree.init(
			$("#" + ztreeData.ztreeId),
			Object.assign({}, ztreeData.ztreeSetting, {
				check: {
					enable: true,
				},
				data: {
					simpleData: {
						enable: true,
						pIdKey: "pid",
					},
				},
				view: {
					showIcon: showIconForTree
				},
			}),
			ztreeData.list
		);
		// ztreeData.ztreeObj.expandAll(true)
	});
}

function updateTree() {
	let nodes = ztreeData.ztreeObj.transformToArray(ztreeData.ztreeObj.getNodes())
	for (var i = 0, l = nodes.length; i < l; i++) {
		if (typeof allVehicleDatas['vehicle_' + nodes[i].id] != 'undefined') {
			nodes[i].name = allVehicleDatas['vehicle_' + nodes[i].id].name;
			nodes[i].iconSkin = "icon" + allVehicleDatas['vehicle_' + nodes[i].id].status;
			ztreeData.ztreeObj.updateNode(nodes[i]);
		}

	}
}


/**
 * 收集
 * @param {*} datas 
 */
const rightSelectedCarsIds = ref([]);
function _rightClickSelectedCarsId(datas) {
	datas.forEach(function (row) {
		if (row.children) {
			if (row.type == 'vehicle') {
				rightSelectedCarsIds.value.push(row.id)
			}
			_rightClickSelectedCarsId(row.children)
		} else {
			if (row.type == 'vehicle') {
				rightSelectedCarsIds.value.push(row.id)
			}
		}
	})

}
//递归遍历实现
function _rebuildDatas(datas) {
	return datas.forEach(function (row) {
		row.name = _rebuildCarName(row)
		if (row.children) {
			row.open = true
			if (row.type == 'vehicle') {
				row.iconSkin = "icon" + row.status
				row.open = false
				row.checked = _vehicleCheck(row.id)
				allVehicleIds.push(row.id);
				allVehicleDatas['vehicle_' + row.id] = row
			}

			if (row.type == 'fleet') {
				row.iconSkin = 'icon_fleet';
			}
			if (row.type == 'route') {
				row.iconSkin = 'icon_route';
			}
			if (row.type == 'video') {
				row.iconSkin = 'icon_video';
			}

			_rebuildDatas(row.children)
		} else {
			if (row.type == 'vehicle') {
				row.iconSkin = "icon" + row.status
				row.checked = _vehicleCheck(row.id)
				allVehicleIds.push(row.id);
				allVehicleDatas['vehicle_' + row.id] = row
			}

			if (row.type == 'fleet') {
				row.iconSkin = 'icon_fleet';
			}
			if (row.type == 'route') {
				row.iconSkin = 'icon_route';
			}
			if (row.type == 'video') {
				row.iconSkin = 'icon_video';
			}
		}
	})
}
function _vehicleCheck(id = '') {
	return selectedVehicleIds.value.includes(id)
}
function _rebuildCarName(item) {
	let name = '';
	if (item.type == 'vehicle') {
		if (ConfigSetting.value.carShow.includes('车牌')) {
			name += item.name
		}
		if (ConfigSetting.value.carShow.includes('自编号')) {
			name += '(' + item.numbered + ')'
		}
		if (ConfigSetting.value.carShow.includes('车辆类型')) {
			name += '[' + _vehicle_type(item.carType) + ']'
		}
		if (ConfigSetting.value.carShow.includes('驾驶员姓名')) {
			name += '  ' + item.driverName
		}
		if (ConfigSetting.value.carShow.includes('速度')) {
			name += '   ' + item.speed + 'km/s'
		}
		if (ConfigSetting.value.carShow.includes('所在区域')) {
			name += '  ' + item.region
		}
		if (ConfigSetting.value.carShow.includes('设备编号')) {
			name += '  （' + item.code + '）'
		}
	} else if (item.type == 'video') {
		name = item.name;
	} else {
		name = item.name + '(' + item.onlineCount + '/' + item.count + ')';
	}
	return name;
}
var vehicleTypes = {}
function _vehicle_type(key = '') {
	if (JSON.stringify(vehicleTypes) === '{}') {
		basic_vehicle_type.value.forEach((item) => {
			vehicleTypes['key_' + item.value] = item.label
		})
	}
	return vehicleTypes['key_' + key] ? vehicleTypes['key_' + key] : '';
}


/** 提交按钮 */
function submitForm() {
	proxy.$refs["formRef"].validate(valid => {
		console.log('form', form.value)
		if (valid) {
			buttonLoading.value = true;
			let parmas = {
				page: configKey,
				content: JSON.stringify(form.value)
			}
			if (typeof configForm.value.id == 'undefined') {
				addPageSetting(parmas).then(res => {
					proxy.$modal.msgSuccess("保存成功");
					visible.value = false
					ConfigSetting.value = JSON.parse(JSON.stringify(form.value))
					searchCar()
				}).finally(() => {
					buttonLoading.value = false;
				});
			} else {
				parmas.id = configForm.value.id;
				updatePageSetting(parmas).then(res => {
					proxy.$modal.msgSuccess("保存成功");
					visible.value = false
					ConfigSetting.value = JSON.parse(JSON.stringify(form.value))
					searchCar()
				}).finally(() => {
					buttonLoading.value = false;
				});
			}
		}
	});
}

function switchStatus(type = '') {
	switch (type) {
		//1全部车辆 2在线车辆 3离线车辆 4关注车辆 5停运车辆 6行驶车辆 7停火车辆
		case '全部车辆':
			queryParams.value.status = 1;
			break;
		case '在线车辆':
			queryParams.value.status = 2;
			break;
		case '离线车辆':
			queryParams.value.status = 3;
			break;
		case '关注车辆':
			queryParams.value.status = 4;
			break;
		case '停运车辆':
			queryParams.value.status = 5;
			break;
		case '行驶车辆':
			queryParams.value.status = 6;
			break;
		case '熄火车辆':
			queryParams.value.status = 7;
			break;
	}
	searchCar()
}

const safeMapStore = useSatetyMapStore();
/**
 * 左键单击
 * @param {*} data 
 */
function nodeClick(event, treeId, treeNode) {
	console.log('click', treeNode)
	if (treeNode.type == 'vehicle' && treeNode.checked == true) {
		safeMapStore.setCurrentSelectVehicleId(treeNode.id)
	}
	contextmenu.value.hide()
}
/**
 * 监听选中
 * @param {*} event 
 * @param {*} treeId 
 * @param {*} treeNode 
 */
function checkChange(event, treeId, treeNode) {
	console.log('checkChange', treeNode)
	var nodes = ztreeData.ztreeObj.getCheckedNodes(true);
	console.log('nodes', nodes)
	_getCarIds(nodes)
}

function _getCarIds(obj = {}) {
	let selectedCarIds = [];
	obj.map((item) => {
		item.type == 'vehicle' ? selectedCarIds.push(item.id) : '';
	})
	ztreeData.selectedCarIds = selectedCarIds;
	safeMapStore.setSelectedVehicleIds(selectedCarIds)
}

/**
 * 右键操作
 * @param {*} event 
 * @param {*} treeId 
 * @param {*} treeNode 
 */
function nodeContextmenu(event, treeId, treeNode) {
	if (treeNode.type == 'vehicle' || treeNode.type == 'dept' || treeNode.type == 'fleet' || treeNode.type == 'route') {
		ztreeData.rightClickType = treeNode.type
		contextmenu.value.show({ left: event.pageX, top: event.pageY })
	}
	rightSelectedCarsIds.value = [];
	let treeNodesArr = [];
	treeNodesArr.push(treeNode)
	console.log('nodeContextmenu', treeNodesArr)
	_rightClickSelectedCarsId(treeNodesArr)

}
const contextmenu = ref('')
/**
 * 收藏车辆
 */
function collectVehicle() {
	let params = {
		vehicleIds: rightSelectedCarsIds.value
	}
	addCollectVehicle(params).then(res => {
		proxy.$modal.msgSuccess("收藏成功");
		carsTotal()
	})
}
/**
 * 取消收藏
 */
function deleteCollectVehicle() {
	delCollectVehicle(rightSelectedCarsIds.value).then(res => {
		proxy.$modal.msgSuccess("取消收藏成功");
		carsTotal()
		if (queryParams.value.status == 4) {
			searchCar()
		}

	})
}

/**
 * 车辆点名
 */
function carDown() {
	alert('车辆点名')
}

/**
 * 轨迹跟踪
 */
function historyTrack() {
	alert('轨迹跟踪')
}
/**
 * 实时视频
 */
function liveVideo() {
	alert('实时视频')
}
/**
 * 视频回放
 */
function videoHistory() {
	alert('视频回放')
}
/**
 * 轨迹回放
 */
function trackPlayback() {
	alert('轨迹回放')
}
/**
 * 短信下发
 */
function sms() {
	alert('短信下发')
}
/**
 * 语音对讲
 */
function voice() {
	alert('语音对讲')
}
/**
 * 拍摄照片
 */
function takePhoto() {
	alert('拍摄照片')
}
/**
 * 终端信息读取
 */
function terminalRead() {
	alert('终端信息读取')
}
/**
 * 终端参数设置
 */
function terminalSetting() {
	alert('终端参数设置')
}

// 车辆统计
const totalInfo = ref({})
const store = useVehicleStore()
function carsTotal() {
	store.vehicleCollect().then(res => {
		totalInfo.value = res
	})
}
carsTotal()

function showIconForTree(treeId, treeNode) {
	let arr = ['vehicle', 'fleet', 'route', 'video'];
	return arr.includes(treeNode.type) ? true : false;
	// return treeNode.type == 'vehicle' ? true : false;
};

const selectedVehicleIds = computed(() => {
	return safeMapStore.selectedVehicleIds
})
watch(() => ztreeData.list, (nodes) => {
	console.log('Tree Data update', nodes)
	if (ztreeData.ztreeObj) {
		// ztreeData.ztreeObj.destroy();
	}

}, { immediate: true, deep: true })

watch(() => JSON.parse(JSON.stringify(queryParams.value)), (newVal, oldVal) => {
	safeMapStore.setCurrentSelectVehicleId('')
	safeMapStore.setSelectedVehicleIds([])
}, { deep: true })
const currentSelectVehicleId = computed(() => {
	return safeMapStore.currentSelectVehicleId
})
watch(currentSelectVehicleId, (value) => {
	var currNode = ztreeData.ztreeObj.getNodeByParam("id", value)
	ztreeData.ztreeObj.selectNode(currNode);
})

var timer = 0;
onMounted(() => {
	timer = setInterval(() => {
		//设置定时器
		searchCar(false); //自定义事件
	}, 60000);
	console.log('carTree onMounted')
})

onUnmounted(() => {
	console.log('carTree onUnmounted')
	clearInterval(timer); //清除定时器
	timer = 0;
})

onActivated(() => {
	// 调用时机为首次挂载
	// 以及每次从缓存中被重新插入时
	console.log('carTree activeted')
	if (timer == 0) {
		timer = setInterval(() => {
			//设置定时器
			searchCar(false); //自定义事件
		}, 60000);
	}


})

onDeactivated(() => {
	// 在从 DOM 上移除、进入缓存
	// 以及组件卸载时调用
	console.log('carTree unactiveted')
	clearInterval(timer); //清除定时器
	timer = 0;
})
</script>
<style lang="scss">
.ztree {
	text-align: left;
	font-size: 14px;
	// height: 100%;
	padding-left: 10px;
}

.vue-giant-tree li {
	list-style-type: none;
	white-space: nowrap;
	outline: none;
}

.vue-giant-tree li ul {
	position: relative;
	padding: 0 0 0 20px;
	margin: 0;
}

.vue-giant-tree .line:before {
	position: absolute;
	top: 0;
	left: 10px;
	height: 100%;
	content: "";
	border-right: 1px dotted #dbdbdb;
}

.vue-giant-tree .roots_docu:before,
.vue-giant-tree .roots_docu:after,
.vue-giant-tree .center_docu:before,
.vue-giant-tree .bottom_docu:before,
.vue-giant-tree .center_docu:after,
.vue-giant-tree .bottom_docu:after {
	position: absolute;
	content: "";
	border: 0 dotted #dbdbdb;
}

.vue-giant-tree .roots_docu:before {
	left: 10px;
	height: 50%;
	top: 50%;
	border-left-width: 1px;
}

.vue-giant-tree .roots_docu:after {
	top: 50%;
	left: 11px;
	width: 50%;
	border-top-width: 1px;
}

.vue-giant-tree .center_docu:before {
	left: 10px;
	height: 100%;
	border-left-width: 1px;
}

.vue-giant-tree .center_docu:after {
	top: 50%;
	left: 11px;
	width: 50%;
	border-top-width: 1px;
}

.vue-giant-tree .bottom_docu:before {
	left: 10px;
	height: 50%;
	border-left-width: 1px;
}

.vue-giant-tree .bottom_docu:after {
	top: 50%;
	left: 11px;
	width: 50%;
	border-top-width: 1px;
}

.vue-giant-tree li a {
	display: inline-block;
	line-height: 22px;
	height: 22px;
	margin: 0;
	cursor: pointer;
	transition: none;
	vertical-align: middle;
	color: #555555;
}

.vue-giant-tree .node_name {
	display: inline-block;
	padding: 0 3px;
	border-radius: 4px;
}

.vue-giant-tree .curSelectedNode .node_name {
	color: #000;
	background-color: #c9e9f7;
}

.vue-giant-tree .curSelectedNode_Edit {
	height: 20px;
	opacity: 0.8;
	color: #000;
	border: 1px #6cc2e8 solid;
	background-color: #9dd6f0;
}

.vue-giant-tree .tmpTargetNode_inner {
	opacity: 0.8;
	color: #fff;
	background-color: #4fcbf0;
	filter: alpha(opacity=80);
}

.vue-giant-tree .rename {
	font-size: 12px;
	line-height: 22px;
	width: 80px;
	height: 22px;
	margin: 0;
	padding: 0;
	vertical-align: top;
	border: 0;
	background: none;
}

.vue-giant-tree .button {
	position: relative;
	display: inline-block;
	line-height: 22px;
	height: 22px;
	width: 22px;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
}

.vue-giant-tree .button.edit {
	color: #25ae88;
}

.vue-giant-tree .button.remove {
	color: #cb4042;
}

.vue-giant-tree .button.chk {
	position: relative;
	width: 14px;
	height: 14px;
	margin: 0 4px 0 0;
	border: 1px solid #d7dde4;
	border-radius: 2px;
	background: #fff;
}

.vue-giant-tree .chk.radio_true_full,
.vue-giant-tree .chk.radio_false_full,
.vue-giant-tree .chk.radio_true_full_focus,
.vue-giant-tree .chk.radio_false_full_focus,
.vue-giant-tree .chk.radio_false_disable,
.vue-giant-tree .chk.radio_true_disable,
.vue-giant-tree .chk.radio_true_part,
.vue-giant-tree .chk.radio_false_part,
.vue-giant-tree .chk.radio_true_part_focus,
.vue-giant-tree .chk.radio_false_part_focus {
	border-radius: 8px;
}

.vue-giant-tree .button.chk:after {
	position: absolute;
	top: 1px;
	left: 4px;
	width: 4px;
	height: 8px;
	content: "";
	transition: -webkit-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
	-webkit-transform: rotate(0deg) scale(0);
	transform: rotate(0deg) scale(0);
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

.vue-giant-tree .button.checkbox_false_full_focus {
	border-color: #ccc;
}

.vue-giant-tree .button.checkbox_true_full,
.vue-giant-tree .button.checkbox_true_full_focus,
.vue-giant-tree .button.checkbox_true_part,
.vue-giant-tree .button.checkbox_true_part_focus,
.vue-giant-tree .button.checkbox_true_disable {
	border-color: #39f;
	background-color: #39f;
}

.vue-giant-tree .button.checkbox_true_full:after,
.vue-giant-tree .button.checkbox_true_full_focus:after,
.vue-giant-tree .button.checkbox_true_disable:after {
	-webkit-transform: rotate(45deg) scale(1);
	transform: rotate(45deg) scale(1);
}

.vue-giant-tree .button.checkbox_true_part:after,
.vue-giant-tree .button.checkbox_true_part_focus:after {
	top: 5px;
	left: 2px;
	width: 10px;
	height: 1px;
	-webkit-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
	border-right: 0;
}

.vue-giant-tree .button.radio_true_full,
.vue-giant-tree .chk.radio_true_full_focus,
.vue-giant-tree .chk.radio_true_part,
.vue-giant-tree .chk.radio_true_part_focus {
	border-color: #39f;
}

.vue-giant-tree .button.radio_true_full:after,
.vue-giant-tree .chk.radio_true_full_focus:after,
.vue-giant-tree .chk.radio_true_part:after,
.vue-giant-tree .chk.radio_true_part_focus:after {
	top: 3px;
	left: 3px;
	width: 8px;
	-webkit-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
	border: 0;
	border-radius: 4px;
	background: #39f;
}

.vue-giant-tree .button.checkbox_true_disable,
.vue-giant-tree .button.checkbox_false_disable,
.vue-giant-tree .chk.radio_false_disable,
.vue-giant-tree .chk.radio_true_disable {
	cursor: not-allowed;
}

.vue-giant-tree .button.checkbox_false_disable {
	background-color: #f3f3f3;
}

.vue-giant-tree .button.noline_close:before,
.vue-giant-tree .button.noline_open:before,
.vue-giant-tree .button.root_open:before,
.vue-giant-tree .button.root_close:before,
.vue-giant-tree .button.roots_open:before,
.vue-giant-tree .button.roots_close:before,
.vue-giant-tree .button.bottom_open:before,
.vue-giant-tree .button.bottom_close:before,
.vue-giant-tree .button.center_open:before,
.vue-giant-tree .button.center_close:before {
	position: absolute;
	top: 5px;
	left: 5px;
	content: "";
	transition: -webkit-transform ease 0.3s;
	transition: transform ease 0.3s;
	transition: transform ease 0.3s, -webkit-transform ease 0.3s;
	-webkit-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
	-webkit-transform-origin: 25% 50%;
	transform-origin: 25% 50%;
	border: 6px solid;
	border-color: transparent transparent transparent #666;
}

.vue-giant-tree .button.noline_open:before,
.vue-giant-tree .button.root_open:before,
.vue-giant-tree .button.roots_open:before,
.vue-giant-tree .button.bottom_open:before,
.vue-giant-tree .button.center_open:before {
	-webkit-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
}

.vue-giant-tree .button.ico_loading {
	margin-right: 2px;
	background: url("") 0 center no-repeat;
}

.vue-giant-tree .tmpTargetzTree {
	opacity: 0.8;
	background-color: #2ea9df;
	filter: alpha(opacity=80);
}

.vue-giant-tree .tmpzTreeMove_arrow {
	position: absolute;
	width: 18px;
	height: 18px;
	color: #4fcbf0;
}

.ztree li span.button {
	&.icon1_ico_open {
		background: url(/img/offline_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon1_ico_close {
		background: url(/img/offline_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon1_ico_docu {
		background: url(/img/offline_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon2_ico_open {
		background: url(/img/waring_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon2_ico_close {
		background: url(/img/waring_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon2_ico_docu {
		background: url(/img/waring_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon3_ico_open {
		background: url(/img/outage_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon3_ico_close {
		background: url(/img/outage_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon3_ico_docu {
		background: url(/img/outage_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon4_ico_open {
		background: url(/img/stop_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon4_ico_close {
		background: url(/img/stop_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon4_ico_docu {
		background: url(/img/stop_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon5_ico_open {
		background: url(/img/online_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon5_ico_close {
		background: url(/img/online_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon5_ico_docu {
		background: url(/img/online_small.png) no-repeat scroll 0 5px transparent;
	}

	&.icon_fleet_ico_open {
		background: url(/img/fleet.png) no-repeat scroll 0 -1px transparent;
	}

	&.icon_fleet_ico_close {
		background: url(/img/fleet.png) no-repeat scroll 0 -1px transparent;
	}

	&.icon_fleet_ico_docu {
		background: url(/img/fleet.png) no-repeat scroll 0 -1px transparent;
	}

	&.icon_route_ico_open {
		background: url(/img/route.png) no-repeat scroll 0 1px transparent;
	}

	&.icon_route_ico_close {
		background: url(/img/route.png) no-repeat scroll 0 1px transparent;
	}

	&.icon_route_ico_docu {
		background: url(/img/route.png) no-repeat scroll 0 1px transparent;
	}

	&.icon_video_ico_open {
		background: url(/img/video.png) no-repeat scroll 0 3px transparent;
	}

	&.icon_video_ico_close {
		background: url(/img/video.png) no-repeat scroll 0 3px transparent;
	}

	&.icon_video_ico_docu {
		background: url(/img/video.png) no-repeat scroll 0 3px transparent;
	}
}
</style>
<style>
ul.ztree.zTreeDragUL {
	margin: 0;
	padding: 0;
	position: absolute;
	overflow: hidden;
	background-color: #dedede;
	border: 1px #4fcbf0 dotted;
	border-radius: 4px;
	opacity: 0.7;
}

.zTreeMask {
	position: absolute;
	z-index: 10000;
	opacity: 0;
	background-color: #cfcfcf;
}
</style>
